<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item">
								<image src="../../static/index/banner.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="../../static/index/banner.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="../../static/index/banner.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="../../static/index/banner.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="../../static/index/banner.jpg"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav_item">
				<navigator url="/pages/nav/syn">
					<image src="../../static/index/syn.png"></image>
					<text>同步拍</text>
				</navigator>
			</view>
			<view class="nav_item">
				<navigator url="/pages/nav/limit">
					<image src="../../static/index/limit.png"></image>
					<text>限时拍</text>
				</navigator>
			</view>
			<view class="nav_item">
				<navigator url="/pages/nav/collect">
					<image src="../../static/index/collect.png"></image>
					<text>拍品征集</text>
				</navigator>
			</view>
			<view class="nav_item">
				<navigator url="/pages/nav/server">
					<image src="../../static/index/server.png"></image>
					<text>服务指南</text>
				</navigator>
			</view>
		</view>
		
		<view class="limited">
			<view class="left">
				<text class="name"><image src="../../static/index/limit_title.png"></image>限时拍</text>
				<text class="desc">TIME LIMITED</text>
			</view>
			<view class="right">MORE ></view>
		</view>
		
		<view class="limit_show">
			<view class="one">
				<image src="../../static/index/limitshow.png"></image>
				<view class="bottom">
					<view class="title">
						北京荣宝·艺海拾珍书法作品专场网络拍卖会
					</view>
					<view class="desc">
						<view class="time">距结束：<text>11</text>小时<text>22</text>分<text>45</text>秒</view>
						<view class="count">出价94次</view>
					</view>
				</view>
			</view>
			
			<view class="one">
				<image src="../../static/index/limitshow.png"></image>
				<view class="bottom">
					<view class="title">
						北京荣宝·艺海拾珍书法作品专场网络拍卖会
					</view>
					<view class="desc">
						<view class="time">距结束：<text>11</text>小时<text>22</text>分<text>45</text>秒</view>
						<view class="count">出价94次</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="guide">
			<view>
				<image src="../../static/index/guide1.png"></image>
			</view>
			<view>
				<image src="../../static/index/guide2.png"></image>
			</view>
			<view>
				<image src="../../static/index/guide3.png"></image>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.swiper{width:750rpx;height: 900rpx;}
	.swiper image{width:100%;height: 900rpx;object-fit: cover;}
	.nav{display: flex;margin:40rpx 0;}
	.nav .nav_item{width: 25%;text-align: center;}
	.nav .nav_item image{width:80rpx;height:80rpx;}
	.nav .nav_item text{margin-top:10rpx;display: block;font-weight: bold;}
	.limited{padding:0 40rpx;display: flex;justify-content: space-between;}
	.limited .left{position: relative;}
	.limited .left image{width: 12rpx;height:25rpx;margin-right: 10rpx;}
	.limited .left .name{font-size: 32rpx;font-weight: bold;}
	.limited .left .desc{width:200rpx;color:#bd0505;font-size: 20rpx;position: absolute;left:0;top:45rpx;margin-left: 20rpx;}
	.limited .right{font-size: 20rpx;color: #bd0505;margin-top: 20rpx;}
	.limit_show{margin:60rpx 40rpx 20rpx;}
	.limit_show image{width: 100%;height: 307rpx;box-shadow: 0px -7px 32px 6px rgba(17, 17, 17, 0.1);border-radius: 10rpx;object-fit: cover;}
	.limit_show .one{margin-bottom: 40rpx;}
	.limit_show .bottom{padding:10rpx 15rpx;}
	.limit_show .title{font-weight:bold;line-height: 60rpx;color: #333333;font-size: 28rpx;}
	.limit_show .desc{display: flex;justify-content:space-between;font-size: 24rpx;}
	.limit_show .desc .time text{color:#bd0505;}
	.guide{display: flex;justify-content: center;margin-bottom: 35rpx;}
	.guide view{padding:0 10rpx;}
	.guide image{width:203rpx;height:138rpx;object-fit: cover;}
</style>
